<template>
  <div class="navbar">
    <div class="item" v-for="(item,index ) in navbar.item" :key="item.id" @click="changeActiveNav(index)">
      <img :src="activeNav!=index?item.imgUrl:item.activeImgUrl" alt="">
      <span :style="{fontSize: .4348+'rem',color: activeNav!=index?'':activeColor}">{{ item.title }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getNavBar } from '@/api/index';
const route = useRoute();
const router = useRouter();

let navbar = reactive({
  item: [],
});

let activeNav = ref(0);
let activeColor =ref('rgb(26,250,41)');
let changeActiveNav =(index)=>{
  if (index==0){
    // 去我的页面
    router.push('/');
  }else{
    router.push('/my');
  }
  
  activeNav.value=index;
}

onMounted(async () => {
  if(route.path=="/"){
    activeNav.value=0
  }else {
    activeNav.value=1
  }
  let res = await getNavBar();
  navbar.item = res.data.data;
 console.log(navbar.item);
})
</script>
<style scoped lang='css'>
.navbar {
  display: flex;
  border-top: .02rem solid #ccc;
  padding-top: .1208rem;
}
.navbar .item:first-child {
  border-right: 0.02rem solid #ccc;
}
.item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item img {
  width: 1.1rem;
  height: 1.1rem;
}
</style>